<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连接程序</title>
</head>
<style>
    .ys{width: auto; height: auto; margin-top: 5px; padding-left: 5px; line-height: 30px; border: solid #cceed8 1px; border-radius: 5px; background: #efea98
    }
</style>
<body>
    <div style="width: 1000px; height:600px; margin: auto; border:solid #dcdbdb 2px; border-radius: 5px; margin-top: 5%;">
        <div style="width: 700px;float: left; height:600px;">
            <div style="width: 90%; height: 400px; margin: auto; border-bottom: solid #d2cfcf 1px; margin-top: 10px; overflow: scroll">
                <label id="wechat">聊天内容</label>
            </div>
            <input id="name" type="text" style="width: 30%; height: 30px; margin-left: 30px; margin-top: 20px;" placeholder="请输入姓名">
            <textarea id="content" style="width: 630px; margin-left: 30px; margin-top: 10px; height: 80px;" placeholder="请输入聊天内容"></textarea>
            <button id="send" style="margin-left: 570px; height: 30px; width: 100px;">发送消息</button>
        </div>
        <div style="width: 298px;float: left; height:600px; border-left: solid #fff125 1px;">
            <div style="width: 90%; margin: auto; margin-top: 10px;">
                <label id="tips">服务器链接中......</label>
            </div>

        </div>
    </div>
</body>
</html>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
<script>
    var worker=new WebSocket("ws://10.10.112.63:9000");
    worker.onopen=function (){
        $('#tips').html("服务器链接成功！");
    }

    $('#send').click(function(){
        var name=$('#name').val();
        var content=$('#content').val();
        if(name==''){
            alert("请输入你的姓名");
            return false;
        }
        if(content==''){
            alert("请输入聊天内容");
            return false;
        }
        var msg=JSON.stringify({
            name:name,
            content:content
        });
        worker.send(msg);
    });

    worker.onmessage=function (data){
        var music=new Audio();
        music.src="./123.mp3";
        music.play();

        var abc=JSON.parse(data.data);
        var str="<div class='ys'>";
            str+=abc.name+"说："+abc.content;
            str+="</div>";
        $('#wechat').append(str);
    }



</script>
